<title>文本框高度自适应</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">  
    #shadow, #text { font: 12px/16px Arial; width: 200px; overflow: hidden; height: 20px; }  
    #shadow { position: absolute; border-width: 0px; padding: 0px; visibility: hidden; }  
    #text { resize: none; }  
</style>  
<script type="text/javascript">
    window.onload = function () {  
        var text = document.getElementById("text"); //用户看到的文本框  
        var shadow = document.getElementById("shadow"); //隐藏的文本框  
  
        text.oninput = //非IE的  
        text.onpropertychange = //IE的  
        onchange;  
          
        function onchange() {  
            shadow.value = text.value;  
            setHeight();  
            setTimeout(setHeight, 0);   
            function setHeight() { text.style.height = shadow.scrollHeight + "px"; }  
        }  
    };  
</script>  
  
  
<textarea id="text"></textarea>  
<textarea id="shadow"></textarea>
//使用两个textarea，隐藏其中一个textarea，设置另一个的resize为空。不会出现那个拖动条及自动增长。
//将没有隐藏的textarea的value赋给另一个textarea使其大小发生改变，获取他的scrollheight。
//再将scrollheight赋给不会自动增长的textarea使其大小发生改变，如字数增加而发生对应的改变。